<!--推荐设计方-->
<template>
    <div>
        <el-row :gutter="20" style="padding-bottom: 15px;border-bottom: 1px solid gray">
            <el-col :span="6"><div class="grid-content bg-purple">企业</div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">添加时间</div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple">标签（最多6个）</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">描述</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">操作</div></el-col>
        </el-row>
        <el-row :gutter="20" style="line-height:35px;padding-top: 10px;padding-bottom: 0px;border-bottom: 1px dotted gray" v-for="(item,index) in num">
            <!--选择企业-->
            <el-col :span="6"><div class="grid-content bg-purple">
                <el-form :inline="true" :model="formInline" class="demo-form-inline" :key="" style="height:60px">
                    <el-form-item label="">
                        <el-select v-model="formInline.region" placeholder="选择企业">
                            <el-option
                                    v-for="date in item.options"
                                    :key="date.value"
                                    :label="date.label"
                                    :value="date.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" >
                </el-form-item>
                </el-form>
            </div></el-col>
            <!--时间-->
            <el-col :span="3">
                <div class="grid-content bg-purple">
                    <span>2017.07.10</span>
                 </div></el-col>
            <!--设置标签-->
            <el-col :span="5">
                 <div class="grid-content bg-purple">
                    <span v-for="bq in item.arr" style="border: 1px solid gray;display: inline-block;border-radius: 2px;margin: 2px;font-size: 10px;padding: 5px">{{bq}}</span>
                </div></el-col>
            <!--描述文字-->
            <el-col :span="4">
                <!--多行文字省略号-->
                <div class="grid-content bg-purple" style="-webkit-line-clamp:3;overflow:hidden;display: -webkit-box; -webkit-box-orient:vertical;text-overflow: ellipsis">
                    <span>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</span>
                </div>
            </el-col>
            <!--按钮标签-->
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-button size="mini" @click=" setTag('addTag',index)">设置标签</el-button>
                    <el-button size="mini" @click=" editDescribe('addDescribe',index)">编辑描述</el-button>
                    <el-button size="mini" @click="remove(index)">移除</el-button>
                </div>
            </el-col>
        </el-row>
        <el-button type="primary" @click="addRecommend" >增加推荐</el-button>
        <!--添加标签属性-->
        <el-dialog title="设置标签" :visible.sync="dialog.addTag.open" v-if="dialog.addTag.open" :modal="false"top="70%">
            <template>
                <!--属性标签选项-->
                <el-checkbox-group v-model="tagList">
                    <el-checkbox label="复选框 A"></el-checkbox>
                    <el-checkbox label="复选框 B"></el-checkbox>
                    <el-checkbox label="复选框 C"></el-checkbox>
                    <el-checkbox label="复选框 d"></el-checkbox>
                    <el-checkbox label="复选框 e"></el-checkbox>
                </el-checkbox-group>
                <el-button type="primary" size="small" @click="commitTag('addTag')">确定</el-button>
            </template>
        </el-dialog>
        <!--添加描述-->
        <el-dialog title="添加描述" :visible.sync="dialog.addDescribe.open" v-if="dialog.addDescribe.open" :modal="false"top="70%">
            <template>
            <el-form>
                <el-form-item label="描述" prop="desc">
                    <el-input type="textarea" ></el-input>
                </el-form-item>
            </el-form>
                <el-button type="primary" size="small" @click="commitDes('addDescribe')">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
//                控制弹出层
                dialog:{
                    addField:{
                        open:false
                    },
    //                    添加标签
                    addTag:{
                        open:false
                    },
    //                    添加描述
                    addDescribe:{
                        open:false
                        }
                },
//                存储标签
                tagList: [],
//                领域添加
                fieldList: [],
                array:[],
//                添加列表的数据源
                num:[
                    {
                        options: [{
                        value: '选项1',
                        label: '黄金糕'
                    }, {
                        value: '选项2',
                        label: '双皮奶'
                    }, {
                        value: '选项3',
                        label: '蚵仔煎'
                    },],
                        date:'',arr:['康师傅','统一','老谭'],
                        text:''
                }
                ],
                formInline: {
                user: '',
                region: ''
            },
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        },methods:{
//            设置标签
            setTag(param,index){
                this.openDialog(param)
                console.log(index)
            },
//            编辑描述
            editDescribe(param,index){
                this.openDialog(param)
            },
            openDialog(dialog){
                this.dialog[dialog].open = true
            },
//            增加推荐
            addRecommend(){
                this.num.push({name:'',age:'',arr:[]})
//                alert(this.num)
                console.log(this.num)
            },
//            删除单条推荐
            remove(par){
//                判断索引位置
                var a =this.num.indexOf(par)
                this.num.splice(a,1)
            },
            commitField(index){

            },
//            确定增加标签
            commitTag(param,index){

                console.log(index)
                console.log(this.num[index])

                this.dialog[param].open = false
            },
//            确定添加描述
            commitDes(param,index){

            },

        },
    }
</script>